<template>
	<view class="uy-tabs">
		<scroll-view :scroll-x="scrollable" scroll-with-animation :scroll-anchoring="true" class="uy-tabs_scroll-view" :scroll-left="scrollLeft">
			<view class="uy-tabs_scroll-box">
				<view class="uy-tabs_scroll-item" :style="[{'flex': scrollable? '': 1}]" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
					<text class="uy-tabs_item-text" :style="[{'padding': `0 ${interval}px`, color: currentActive == index? activeColor: noactiveColor, 'font-size': `${size}px`}, itemStyle]">{{item[keyName]}}</text>
				</view>
				<view class="uy-tabs_active" :style="[{
					width: `${lineWidth}px`,
					height: `${lineHeight}px`,
					background: lineColor,
					transform: lineStyle.transform,
					transitionDuration: `${firstTime ? 0 : duration}ms`,
					bottom: `${lineBottom}px`
				}]"></view>
			</view>
		</scroll-view>
	</view>
</template>
 
<script>
	import fun from './fun.js'
	import props from './props.js'
	export default {
		mixins: [props],
		data() {
			return {
				firstTime: true,
				contentScrollW: 0, // 导航区宽度
				currentActive: this.current, // 当前选中
				scrollLeft: 0, // tabs当前偏移量
				lineStyle: {},    // 下划线位置--动态甲酸
			}
		},
		mounted() {
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
			this.setLine()
		},
		methods: {
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				let query = uni.createSelectorQuery().in(this);
				query.select('.uy-tabs_scroll-view').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
 
				query.selectAll('.uy-tabs_scroll-item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.list[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.list[i].width = data[i].width
					}
				}).exec()
			},
			
			// 计算下划线位置
			setLine() {
				let lineWidth = 0, lineLeft = 0;
				this.getElementData(`.uy-tabs_scroll-item`, res => {
					let el = res[this.currentActive];
					lineWidth = el.width / 2;
					lineLeft = el.width / 2 + (-res[0].left) + el.left;
					this.lineStyle = {
						transform: `translateX(${lineLeft}px) translateX(-50%)`,
					}
					if (this.firstTime) {
						setTimeout(() => {
							this.firstTime = false
						}, 20);
					}
				})
			},
			
			// 获取所有标签节点
			getElementData(el, callback){
					uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
							callback(data[0]);
					});
			},
 
			// 切换操作
			changeMenu(index) {
				fun.sleep().then(() => {
					this.currentActive = index;
					this.scrollLeft = this.list[index].left - (this.contentScrollW / 2) + (this.list[index].width / 2);
					this.setLine()
					let data = this.list[index];
					data['index'] = index;
					this.$emit('change', data)
				})
			}
		}
	}
</script>
 
<style lang="scss">
	.uy-tabs {
		box-sizing: border-box;
 
		&_scroll-view {
			white-space: nowrap;
		}
		
		&_scroll-box {
			display: flex;
			/* #ifdef APP-NVUE */
			flex-direction: row;
			/* #endif */
			align-items: center;
		}
		
		&_scroll-item {
			display: inline-block;
			text-align: center;
			vertical-align: top;
		}
		
		&_item-text {
			display: flex;
			/* #ifdef APP-NVUE */
			flex-direction: row;
			/* #endif */
			align-items: center;
			justify-content: center;
		}
		
		&_active {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			position: absolute;
			left: 0;
			border-radius: 20rpx;
		}
	}
</style>